<template>
    <div id="map">
      <MapOverlay :model-value="modelValue" :map="map" :position="position">
        <div id="popup" class="ol-popup">
          <a href="#" id="popup-closer" class="ol-popup-closer" @click.stop="modelValue = false"></a>
          <div id="popup-title" class="popup-title">提示信息</div>
          <div id="popup-content" class="popup-content">
            当前位置：{{hdms}}
          </div>
        </div>
      </MapOverlay>

    </div>
</template>

<script setup>
    import {Map, Overlay, View} from 'ol'
    import { OSM, XYZ } from "ol/source";
    import {Tile as TileLayer} from 'ol/layer';
    import {toStringHDMS} from 'ol/coordinate';
    import {transform} from "ol/proj";
    import {ref, onMounted} from 'vue'
    import MapOverlay from "@/components/myComponents/MapOverlay.vue";
    const map = ref(null);
    const modelValue = ref(false)
    const position = ref([]);
    const hdms = ref('')
    const initMap = ()=>{
      map.value = new Map({
        target:'map',
        layers: [
          new TileLayer({
            source: new XYZ({url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d30d1c34260f2edc72b25f9985e2fd69"}),
          })
        ],
        //配置视图
        view: new View({
          center: [113.24981689453125, 23.126468438108688], //视图中心位置
          projection: "EPSG:4326", //指定投影
          zoom: 12   //缩放到的级别
        })
      })

      map.value.on('singleclick',(evt)=>{
        const coordinate = evt.coordinate;
        console.log(coordinate,'coordinate')
        modelValue.value = true;
        position.value = coordinate;
        hdms.value = toStringHDMS(coordinate)
      })
    }

    onMounted(initMap)
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }

    .ol-popup {
        position: absolute;
        background-color: white;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
        min-width: 280px;
    }

    .ol-popup:after, .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
    }

    .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
    }

    .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 8px;
    }

    .ol-popup-closer:after {
        content: "✖";
    }
</style>
